import React from 'react';
import { Box, ThemeColorType } from '@nova-hf/ui';
import Endurvirkjun from 'beta/pages/askriftir/[contractId]/skref/greidsludagur/containers/Endurvirkjun';
import { useRouter } from 'next/router';
import { useContractInvoicePeriodEndQuery } from 'typings/graphql';

type ChangePayDateContainerProps = {
  color: ThemeColorType;
};

const ChangePayDateContainer = ({ color }: ChangePayDateContainerProps) => {
  const router = useRouter();
  const contractId = router.query.contractId ?? '';

  const { data: latestPeriodData } = useContractInvoicePeriodEndQuery({
    variables: {
      input: {
        contractId: contractId.toString(),
      },
    },
  });

  const latestDate = latestPeriodData?.contractsInvoices?.invoices?.[0]?.periodEnd || undefined;

  return (
    <Box>
      <Endurvirkjun
        currentDate={latestDate ?? ''}
        color={color}
        contractId={contractId.toString()}
      />
    </Box>
  );
};

export default ChangePayDateContainer;